<template>
	<el-container class="goods-view panel-block">
		<el-header class="sa-flex">
			<span style="font-size: 18px;">推荐商品</span>
		</el-header>
		<el-main class="sa-p-t-0">
			<c-header />
			<!-- 推荐商品搜索 -->
			<c-search @btn="openPopup" @search="headerSearch"  @sort="sortChange" />

			<el-row v-loading="loading" :gutter="10" v-if="state.list.length > 0">
				<template v-for="item in state.list" :key="item">
					<el-col  :xs="24" :sm="12" :md="6" :lg="4" :xl="3" >
						<goodsItem :item="item" @onTap="addGoods" @details="toDetails"/>
					</el-col>
				</template>
			</el-row>
			<sa-empty v-else/>
			

		</el-main>
		<el-footer class="goods-index-footer sa-p-r-80">
			<sa-view-bar>
				<template #right>
					<sa-pagination :pageData="state.pageData"  :pagesize="[24,48,96]" @updateFn="getData" />
				</template>
			</sa-view-bar>
		</el-footer>
	</el-container>
</template>

<script setup>
import { ref, reactive,onMounted, watch, watchEffect } from 'vue';
import { checkAuth } from '@/sheep/directives/auth';
import { api } from "./recommend.service"
import { useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import $store from '@/sheep/store';
import { useModal, usePagination } from '@/sheep/hooks';
import cHeader from './components/header.vue';
import cSearch from './components/search.vue';
import Recommend from './recommend.vue';
import goodsItem from './components/goods-item.vue';
import details from './details.vue';
const loading = ref(true);

const state = reactive({
	sort:{},
	search:{},
	list: [],
	pageData: {
		page: 1,
		list_rows: 24,
		total: 0,
	},
})

onMounted(()=>{
	getData();
})
async function  addGoods(goods){
	const { store_id } =$store('account').info;
	if(!store_id && store_id != 0){
		ElMessage({
			type: 'warning',
			message: '账号下没有绑定店铺',
		});
		return;
	}
	loading.value = true;

	let { data , error} = await api.addGoods(store_id,goods.id)
	loading.value = false;

	getData()
	if (error === 0) {
		ElMessageBox.confirm('商品已铺货，您可到铺货记录查看进度', '铺货成功', {
			type: 'success',
			confirmButtonText: '去铺货记录',
			cancelButtonText: '继续铺货',
		}).then(() => {
			openPopup('log')
		}).catch(() => {
			console.log('取消');
		});
	}

}
function sortChange(data) { 
	state.sort = data;
	getData(1);
}
async function getData(page) { 
	loading.value = true;
    if (page) state.pageData.page = page;
	const search = state.search
    const { error, data } = await api.list({
		store_id: $store('account').info?.store_id,
      page: state.pageData.page,
      list_rows: 24,
	  ...state.sort,
      ...search,
    });
    if (error === 0) {
      state.list = data.data;
	  state.pageData.page = data.current_page;
      state.pageData.total = data.total;
    }
    loading.value = false;
}
function toDetails(item){
	useModal(
		details,
		{
			title: '货源推荐',
			id: item?.id,
		},
		{
			confirm: () => {
				getData();
			},
			close: () => {
				getData();
			},
		},
		true
	);
}
function  openPopup(data){
	useModal(
		Recommend,
		{
			width:'800px',
			title: '商品推荐',
			type: data,
		},
		{
			confirm: () => {
				getData();
			},
		},
		true
	);
}
function headerSearch(data) { 
	state.search = data;
	getData(1);
}

</script>

<style lang="scss" scoped>


</style>
